<template>
  <div class="admin">
    <el-container>
      <el-header>
        <div class="navgition">
          <img
            class="img"
            src="http://localhost:8080/ui/demo/assets/images/logo.png"
          />
          <div class="login">
            <img src="http://localhost:8080/ui/demo/assets/images/avatar.png" />
            <span class="conut">admin1878</span>
            <img
              class="division"
              src="http://localhost:8080/ui/demo/assets/images/division.png"
            />
            <span class="conut"> 退出</span>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            @select="handleSelect"
            router
            background-color="#002b4c"
            text-color="#fff"
            active-text-color="#3795f3"
          >
            <el-submenu
              :index="item.path"
              v-for="item in Data"
              :key="item.RUID"
            >
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ item.meta.title }}</span>
              </template>
              <el-menu-item
                :index="item.path"
                v-for="item in item.children"
                :key="item.RUID"
                >{{ item.meta.title }}</el-menu-item
              >
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-breadcrumb
            class="el-breadcrumb"
            separator-class="el-icon-arrow-right"
          >
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              v-for="(item, index) in breadcrumbList"
              :key="index"
              >{{ item.meta.title }}
              </el-breadcrumb-item
            >
          </el-breadcrumb>
          <div class="conuter">
             <slot></slot>
             
             </div>
         
        </el-main>
      </el-container>
      <el-footer
        >Copyright©2019 - 2024 苏ICP备13023325-1 版权所有
        江苏畅想之星信息技术有限公司</el-footer
      >
    </el-container>
  </div>
</template>
<script>
module.exports = {
  data() {
    return {
      indexBreadcrumbs: [],
    };
  },
  created() {
    this.handChange();
  },
  watch: {
    $route() {
      this.handChange();
    },
  },
  computed: {
    breadcrumbList() {
      let breadcrumbs = [];
      let menuList = this.Data;
      this.indexBreadcrumbs.map((item) => {
        for (let i = 0; i < menuList.length; i++) {
          if (item === menuList[i].path) {
            breadcrumbs.push(menuList[i]);
            if (menuList[i].children) {
              menuList = menuList[i].children;
            }
            break;
          }
        }
      });
      return breadcrumbs;
    },
  },
  methods: {
    handChange() {
      this.$emit("hand-change", this.breadcrumbList);
    },
    handleSelect(index, indexPath) {
      this.indexBreadcrumbs = indexPath;
    },
  },
  props: {
    Data: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style scoped>
.active {
  background-color: #1e76cf;
}
.navgition {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
  align-items: center;
}
.img {
  display: inline-block;
  width: 361px;
  height: 50px;
}
.division {
  display: inline-block;
  height: 30px;
  margin: 0 20px;
}
.conut {
  color: #fff;
  font-size: 18px;
}
.el-breadcrumb {
  margin-bottom: 10px;
}
.el-header {
  background-image: linear-gradient(-90deg, #0954a0 0%, #1e75cf 100%),
    linear-gradient(#dddddd, #dddddd);
  background-blend-mode: normal, normal;
  box-shadow: 0px 0px 10px 0px rgba(7, 0, 2, 0.5);
  height: 80px !important;
  width: 100%;
  text-align: center;
}
.el-footer {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px !important;
  text-align: center;
  line-height: 50px;
  background: #333;
  color: #999999;
}

.el-aside {
  background-color: #002b4c;
  position: absolute;
  top: 80px;
  bottom: 50px;
  color: #333;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
}

.conuter {
  width: 100%;
  height: 97%;
  background: #fff;
}

.el-main {
  box-sizing: border-box;
  background-color: #e9eef3;
  padding: 10px;
  position: absolute;
  top: 80px;
  bottom: 50px;
  left: 200px;
  right: 0;
  color: #333;

}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>